"use client";

/**
 * /w/:workspace/settings/teams — teamspaces.
 *
 *  - List/create:   GET/POST      /workspaces/:id/teams
 *  - Rename/update: PATCH         /workspaces/:id/teams/:teamId
 *  - Delete:        DELETE        /workspaces/:id/teams/:teamId
 *  - Add member:    POST          /workspaces/:id/teams/:teamId/members { userId }
 *  - Remove member: DELETE        /workspaces/:id/teams/:teamId/members/:userId
 *
 * Teams (teamspaces) organize the sidebar's "Teamspaces" section. Only
 * owner/admin manage them (server-side enforcement is authoritative).
 *
 * NOTE FOR THE CORE AGENT: the teams list/get endpoints return only
 * `memberCount` (Prisma `_count`) — no endpoint returns the per-team member
 * *list* (TEAM_SELECT excludes the `members` relation), so this page can add
 * members but cannot display them individually. When `GET …/teams/:teamId`
 * (or the list) includes `members`, the member list + per-member remove can be
 * rendered here (the DELETE …/members/:userId route already exists).
 */
import { useState } from "react";
import { useParams } from "next/navigation";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, Plus, Trash2, Users } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { apiFetch } from "@/lib/api";
import { useWorkspace, useWorkspaceMembers } from "@/hooks/use-workspace";
import { SettingsShell, Section, Field, inputCls } from "@/components/settings/settings-shell";

interface Team {
  id: string;
  name: string;
  slug?: string | null;
  description?: string | null;
  color?: string | null;
  isPrivate?: boolean;
  /** The teams API returns only a member count, not the member list. */
  memberCount?: number;
}
function unwrapTeams(body: unknown): Team[] {
  const b = body as { data?: Team[] } | Team[] | null;
  if (Array.isArray(b)) return b;
  if (b && typeof b === "object" && Array.isArray((b as { data?: Team[] }).data)) return (b as { data: Team[] }).data;
  return [];
}

export default function SettingsTeamsPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: ws, isLoading } = useWorkspace(slugOrId);
  const wid = ws?.id ?? "";
  const qc = useQueryClient();

  const teams = useQuery({
    queryKey: ["workspaces", wid, "teams"],
    queryFn: async (): Promise<Team[]> => unwrapTeams(await apiFetch(`/workspaces/${wid}/teams`)),
    enabled: !!wid
  });

  const [name, setName] = useState("");
  const [color, setColor] = useState("");
  const create = useMutation({
    mutationFn: (input: { name: string; color?: string }) =>
      apiFetch(`/workspaces/${wid}/teams`, { method: "POST", body: input }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["workspaces", wid, "teams"] });
      setName("");
      setColor("");
    }
  });

  const role = (ws?.role ?? "").toLowerCase();
  const canManage = role === "owner" || role === "admin";

  const submitCreate = () => {
    if (!name.trim()) return;
    create.mutate(
      { name: name.trim(), color: color || undefined },
      { onSuccess: () => toast("success", "Team created"), onError: (e) => toast("error", "Create failed", (e as Error).message) }
    );
  };

  return (
    <SettingsShell title="Teams" description="Teamspaces organize shared work in the sidebar." active="teams">
      {isLoading || !ws ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <div className="space-y-5">
          {canManage && (
            <Section title="New team">
              <div className="flex items-center gap-1.5">
                <input className={`min-w-0 flex-1 ${inputCls}`} placeholder="Team name" value={name} onChange={(e) => setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && submitCreate()} />
                <input className={`${inputCls} max-w-20`} placeholder="#hex" value={color} onChange={(e) => setColor(e.target.value)} aria-label="Color" />
                <button type="button" className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50" disabled={!name.trim() || create.isPending} onClick={submitCreate}>
                  {create.isPending ? <Loader2 className="size-3.5 animate-spin" /> : <Plus className="size-3.5" />}
                  Create
                </button>
              </div>
            </Section>
          )}

          <Section title={`Teams (${teams.data?.length ?? 0})`}>
            {teams.isLoading && <p className="text-sm text-muted-foreground">Loading…</p>}
            <ul className="space-y-3">
              {(teams.data ?? []).map((t) => (
                <TeamCard key={t.id} team={t} workspaceId={wid} canManage={canManage} onManage={() => qc.invalidateQueries({ queryKey: ["workspaces", wid, "teams"] })} />
              ))}
            </ul>
            {teams.data && teams.data.length === 0 && (
              <p className="text-sm text-muted-foreground">No teams yet. Create one to organize shared work.</p>
            )}
          </Section>
        </div>
      )}
    </SettingsShell>
  );
}

function TeamCard({ team, workspaceId, canManage, onManage }: { team: Team; workspaceId: string; canManage: boolean; onManage: () => void }) {
  const [editing, setEditing] = useState(false);
  const [name, setName] = useState(team.name);
  const [description, setDescription] = useState(team.description ?? "");
  const [addingId, setAddingId] = useState("");
  const [busy, setBusy] = useState(false);

  const members = useWorkspaceMembers(workspaceId);
  const allMembers = (members.data ?? []) as { userId: string; user: { id: string; name: string; email: string; image?: string | null } }[];

  const save = async () => {
    setBusy(true);
    try {
      await apiFetch(`/workspaces/${workspaceId}/teams/${team.id}`, {
        method: "PATCH",
        body: { name: name.trim(), description: description || null }
      });
      toast("success", "Team updated");
      setEditing(false);
      onManage();
    } catch (e) {
      toast("error", "Update failed", (e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  const remove = async () => {
    setBusy(true);
    try {
      await apiFetch(`/workspaces/${workspaceId}/teams/${team.id}`, { method: "DELETE" });
      toast("success", "Team deleted");
      onManage();
    } catch (e) {
      toast("error", "Delete failed", (e as Error).message);
      setBusy(false);
    }
  };

  const addMember = async () => {
    if (!addingId) return;
    setBusy(true);
    try {
      await apiFetch(`/workspaces/${workspaceId}/teams/${team.id}/members`, { method: "POST", body: { userId: addingId } });
      toast("success", "Member added");
      setAddingId("");
      onManage();
    } catch (e) {
      toast("error", "Add failed", (e as Error).message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <li className="rounded-lg border border-border p-3">
      <div className="flex items-center gap-2.5">
        <span className="flex size-7 items-center justify-center rounded-md bg-muted" aria-hidden>
          <Users className="size-4 text-muted-foreground" />
        </span>
        {editing ? (
          <input className={`min-w-0 flex-1 ${inputCls}`} value={name} onChange={(e) => setName(e.target.value)} aria-label="Team name" />
        ) : (
          <p className="min-w-0 flex-1 truncate text-sm font-medium">{team.name}</p>
        )}
        {!editing && canManage && (
          <button type="button" className="rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-muted" onClick={() => setEditing(true)}>
            Edit
          </button>
        )}
        {!editing && canManage && (
          <button type="button" className="rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive" onClick={remove} disabled={busy} aria-label={`Delete ${team.name}`}>
            <Trash2 className="size-4" />
          </button>
        )}
      </div>

      {editing && (
        <div className="mt-2 space-y-2">
          <Field label="Description">
            <input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} />
          </Field>
          <div className="flex gap-1.5">
            <button type="button" className="rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-white disabled:opacity-50" onClick={save} disabled={busy}>
              {busy ? "Saving…" : "Save"}
            </button>
            <button type="button" className="rounded-md border px-2.5 py-1 text-xs" onClick={() => setEditing(false)}>
              Cancel
            </button>
          </div>
        </div>
      )}

      {team.description && !editing ? <p className="mt-1 text-xs text-muted-foreground">{team.description}</p> : null}

      {/* members */}
      <div className="mt-2 border-t border-border pt-2">
        <p className="mb-1.5 text-xs font-medium text-muted-foreground">
          {team.memberCount != null ? `${team.memberCount} member${team.memberCount === 1 ? "" : "s"}` : "Members"}
        </p>
        {canManage ? (
          <div className="flex items-center gap-1.5">
            <select className={`min-w-0 flex-1 rounded-md border border-input bg-background px-1.5 py-1 text-xs outline-none`} value={addingId} onChange={(e) => setAddingId(e.target.value)} aria-label="Add member">
              <option value="">Add member…</option>
              {allMembers.map((m) => (
                <option key={m.userId} value={m.userId}>
                  {m.user.name}
                </option>
              ))}
            </select>
            <button type="button" className="rounded-md border px-2 py-1 text-xs disabled:opacity-50" onClick={addMember} disabled={!addingId || busy}>
              Add
            </button>
          </div>
        ) : (
          <p className="text-xs text-muted-foreground">
            The teams API doesn't return the individual member list yet, so members can't be displayed or removed here.
          </p>
        )}
      </div>
    </li>
  );
}